<template>
  <div class="pcs-wrap">
    <el-radio-group v-model="type" size="small" class="switch-radio" @change="getstation_rank">
      <el-radio-button label="年">年</el-radio-button>
      <el-radio-button label="月">月</el-radio-button>
      <el-radio-button label="日">日</el-radio-button>
    </el-radio-group>

    <div id="pcs_echarts"></div>
  </div>
</template>

<script>
import API from "@/api/index.api";

export default {
  components: {},
  data() {
    return {
      myChart: null,
      type: '年',
      data: [],
    }
  },
  methods: {
    getstation_rank() {
      API.station_rank({ type: this.type }).then(res => {
        this.data = res.content;
        this.initEcharts();
      })
    },
    initEcharts() {
      const isScreen1920 = window.innerWidth <= 1920;
      let data = this.data;

      var orgOptions = {
        "linkExtendList": [],
        "sortDataList": [{
          "col": "data_num",
          "Merge": false,
          "series": {
            "percentile": false,
            "tooltip": {
              "show": true
            },
            "label": {
              "normal": {
                "dataLabelWereset": false,
                "show": false,
                "textStyle": {
                  "fontFamily": "sans-serif",
                  "color": "#000000",
                  "fontSize": "12",
                  "fontStyle": "normal",
                  "fontWeight": "normal"
                }
              }
            },
            "decimaldigits": 0
          },
          "merge": false,
          "sort": "desc",
          "sortable": false
        }, {
          "col": "data_name",
          "Merge": false,
          "colType": "varchar2",
          "display": true,
          "merge": false,
          "values": [],
          "id": "e9457763-c257-4abc-8ecc-1278cb3ac3c6",
          "sortable": false,
          "type": "eq"
        }],
        "chart_type": "metaPortlet",
        "keys": [{
          "col": "data_name",
          "Merge": false,
          "colType": "varchar2",
          "display": true,
          "merge": false,
          "values": [],
          "alias": "data_name",
          "id": "e9457763-c257-4abc-8ecc-1278cb3ac3c6",
          "sortable": false,
          "type": "eq"
        }],
        "seriesCommon": {
          "label": {
            "normal": {
              "rotate": 0,
              "distance": 5,
              "offset": [0, 0],
              "dataLabelWereset": false,
              "show": true
            }
          }
        },
        "values": [{
          "cols": [{
            "col": "data_num",
            "colDataType": "NUMBER",
            "expCalFormulaReplace": "",
            "series": {
              "Insideoption": {
                "valuetype": "5",
                "valueStyle": {
                  "fontFamily": "sans-serif",
                  "color": "#000000",
                  "fontSize": "12",
                  "fontStyle": "normal",
                  "fontWeight": "normal"
                },
                "text": "",
                "textStyle": {
                  "fontFamily": "sans-serif",
                  "color": "#000000",
                  "fontSize": "12",
                  "fontStyle": "normal",
                  "fontWeight": "normal"
                },
                "type": "1"
              },
              "animationDelayTime": "",
              "percentile": false,
              "lineStyle": {
                "type": "solid"
              },
              "tooltip": {
                "show": true
              },
              "symbolShow": true,
              "label": {
                "normal": {
                  "show": false,
                  "textStyle": {
                    "fontFamily": "sans-serif",
                    "color": "#000000",
                    "fontSize": "12",
                    "fontStyle": "normal",
                    "fontWeight": "normal"
                  }
                }
              },
              "symbolNotShow": false,
              "decimaldigits": 0
            },
            "seriesType": "bar",
            "display": true,
            "expCalFormula": "",
            "width": 0,
            "alias": "data_num",
            "sortable": false,
            "aggregate_type": "sum",
            "decimaldigits": 0
          }],
        }],
        "option": {
          "BAMetaAttributes": {
            "configshowslider": "1",
            "xuhaoer": 16,
            "fontsizeright": isScreen1920 ? 16 : 40,
            "configautoslider": "1",
            "configpagesize": 4,
            "leftpadding": 10,
            "attrname": "",
            "rightpadding": 10,
            "fontsizeleft": 16,
            "xuhaorightpadding": 50
          }
        }
      }

      var fontsizeright = orgOptions.option.BAMetaAttributes.fontsizeright;
      var attrname = orgOptions.option.BAMetaAttributes.attrname ? orgOptions.option.BAMetaAttributes.attrname : '';
      var leftpadding = orgOptions.option.BAMetaAttributes.leftpadding != null ? orgOptions.option.BAMetaAttributes.leftpadding : 10;
      var xuhaofontsize = orgOptions.option.BAMetaAttributes.xuhaofontsize != null ? orgOptions.option.BAMetaAttributes.xuhaofontsize : 28;
      var rightpadding = orgOptions.option.BAMetaAttributes.leftpadding != null ? orgOptions.option.BAMetaAttributes.rightpadding : 10;
      var xuhaorightpadding = orgOptions.option.BAMetaAttributes.xuhaorightpadding != null ? orgOptions.option.BAMetaAttributes.xuhaorightpadding : 0;

      var h1keyName = orgOptions.keys[0].col;
      var z1keyName = orgOptions.values[0].cols[0].col;

      var dataSource = [];
      var dataSourcebg = [];
      var maxNum = 0;
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        let tempitem = {
          value: element[z1keyName],
          name: element[h1keyName],
          xuhao: index + 1,
        }
        dataSource.push(tempitem);
        dataSourcebg.push(100);
        if (element[z1keyName] > maxNum) {
          maxNum = element[z1keyName];
        }
      }
      var maxArr = data.map((item) => maxNum);
      let echarts = this.$echarts;

      let option = {
        title: {
          text: '派出所排名统计',
          top: 10,
          left: 5,
          textStyle: {
            color: '#00F6FF',
            fontSize: isScreen1920 ? 18 : 40
          }
        },

        grid: [{
          // left: leftpadding,
          left: 25,
          top: 50,
          right: rightpadding + 55,
          bottom: 30,
          containLabel: true,
        }],
        xAxis: [
          {
            gridIndex: 0,
            type: 'value',
            axisLabel: { show: false },
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
          },
          {
            gridIndex: 0,
            type: 'value',
            max: 100,
            axisLabel: { show: false },
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
          }
        ],
        yAxis: [{
          gridIndex: 0,
          type: 'category',
          inverse: true,
          position: 'left',
          data: dataSource.map((item) => item.name),
          axisTick: { show: false },
          grid: { top: 0, bottom: 0 },
          axisLine: { show: false },
          splitLine: { show: false },
          axisLabel: {
            width: xuhaofontsize * 2.5,
            padding: [0, 0, 2220, 0],
            align: 'left',
            formatter: (name, index) => {
              let tempValue;
              for (let i = 0; i < dataSource.length; i++) {
                if (dataSource[i].name === name) {
                  tempValue = dataSource[i].xuhao;
                }
              }
              const id = tempValue;
              if (id < 4) {
                return `{icon${id}|${id}}`;
              } else {
                return `{|${id}}`;
              }
            },
          },
        }],
        dataZoom: [
          {
            type: 'slider',
            yAxisIndex: 0, // 控制y轴
            orient: 'vertical', // 垂直方向
            show: true,
            start: 0,
            end: Math.min(100, 4000/dataSource.length), // 动态计算显示比例
            width: 15, // 滚动条宽度（垂直方向）
            right: 5, // 距离右侧的距离
            backgroundColor: 'rgba(47,69,84,0.3)', // 背景颜色
            fillerColor: 'rgba(16,95,149,0.6)', // 选中区域填充颜色
            borderColor: 'transparent', // 边框颜色
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%', // 手柄大小
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            labelFormatter: '', // 隐藏label
            brushSelect: false // 禁止刷选
          },
          {
            type: 'inside',
            yAxisIndex: 0, // 控制y轴
            orient: 'vertical', // 垂直方向
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseMove: true, // 开启鼠标移动触发平移
            moveOnMouseWheel: true // 开启滚轮平移
          }

        ],
        series: [
          {
            name: '背景',
            type: 'bar',
            barWidth: 6,
            barGap: '-100%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: maxArr,
            itemStyle: {
              normal: {
                color: '#02BAF433',
                barBorderRadius: [30, 30, 30, 30],
              },
            },
            label: {
              show: true,
              offset: [30, 0],
              color: '#00C0FD',
              fontSize: fontsizeright,
              fontWeight: 500,
              position: 'right',
              align: 'right',
              formatter: function (params) {
                let tempValue;
                for (var i = 0; i < dataSource.length; i++) {
                  if (dataSource[i].name === params.name) {
                    tempValue = dataSource[i].value;
                  }
                }
                return tempValue + attrname;
              }
            }
          },
          {
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: 6,
            data: dataSource,
            silent: true,
            label: {
              show: true,
              offset: [-50, -1],
              color: '#fff',
              fontSize: isScreen1920 ? 14 : 50,
              fontWeight: 500,
              position: 'left',
              align: 'left',
              formatter: function (params) {
                return params.data.name;
              }
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: [0, 20, 20, 0],
              },
              normal: {
                barBorderRadius: [0, 20, 20, 0],
                color: function (param) {
                  return new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      { offset: 0, color: '#00C0FD00' },
                      { offset: 1, color: '#00C0FD' },
                    ],
                    false
                  )
                },
              },
            },
          },
          {
            type: 'pictorialBar',
            data: dataSource.map((item) => item.value),
            xAxisIndex: 0,
            yAxisIndex: 0,
            symbol: 'circle',
            symbolRotate: null,
            symbolSize: [7, 7],
            z: 100,
            symbolPosition: 'end',
            symbolOffset: [10, 0],
            itemStyle: {
              color: function (param) {
                return '#00C0FD'
              },
              shadowColor: 'rgba(115, 243, 255, 1)',
              shadowBlur: 6,
            },
          },
        ],
      };

      if (this.myChart) {
        this.myChart.dispose()
      }

      this.myChart = this.$echarts.init(document.getElementById('pcs_echarts'))
      this.myChart.setOption(option)

      // 添加窗口大小变化时的自适应
      window.addEventListener('resize', () => {
        this.myChart.resize();
      });
    }
  },
  mounted() {
    this.getstation_rank()
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
    window.removeEventListener('resize', this.myChart.resize);
  }
}
</script>

<style lang="stylus">
.pcs-wrap {
  position: relative;
  height: 100%;
  overflow: hidden;

  .switch-radio {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;

    .el-radio-button__inner {
      background: transparent !important;
      color: white;
    }
  }

  #pcs_echarts {
    width: 100%;
    height: 100%;
    min-height: 300px;
  }
}
</style>